Kodulehe optimeerimine: pildid e-poes

Jaga artiklit sõbraga

Üks pilt on rohkem kui tuhat sõna!

Isegi kui sa müüd kruve, hea kirjelduse ja spetsifikatsiooni abil, siis pildi lisamine aitab rohkem müüa. Arvad, et toode on lihtne ja kõik saavad aru, mida müüd? Isegi sel juhul aitab kvaliteetsete piltide lisamine müüki suurenda.

Järgnevalt toon hulgaliselt võtteid, mis aitavad e-poes müüki suurendada. Lisan ka näiteid tulemustest, mida nende tegevustega on saavutatud.

Näited selles postituses on e-poodidest, kuid
saad neid põhimõtteid kasutada ka siis, kui su veeb ei ole e-pood.

Paljude toodete puhul on ilmselge, et pildid aitavad müüki suurendada:

• Riided;
• Autod;
• Kinnisvara;
• Mööbel;
• Toit.

Samas on pildid olulised ka nii lihtsate ja arusaadavate toodete puhul nagu kruvid ja mutrid. Kvaliteetsete piltide näitamine potentsiaalsetele klientidele on aitab üle saada takistustest tehingu sooritamisel ja suurendada levi. Loe lisaks, kuidas käib piltide optimeerimine siit,

• Kvaliteetsed pildid aitavad kahtlusi hajutada. Kas see on ikka õige toode? Kas värv on sobiv? Aga kuidas see asi teiselt poolt vaadates välja näeb?
• Hea pildimaterjal aitab huvilistes isu tekitada. Mida paremad on pildid, seda rohkem mõjutavad nad huvilist tehingut sooritama.
• Suured ja ilusad pildid on materjal, mida huvilised saavad sotsmeedia kanalites oma kaaslastega jagada.

Tasuta pildid ja videod ärikasutuseks (40 pildipanka)

Tee pildid suuremaks!

Parimad pildid on hea kvaliteediga suured originaalpildid. Samas on olnud juhte, kus isegi olemasolevate piltide suuremaks muutmine on andnud märkimisväärseid tulemusi. Skinner Auctions suurendas pilte oma veebilehel 250 piksliselt mõõdult 350 peale. Siin on näide esialgsest ja suuremast pildist (WhichTestWon).

Tulemused olid erakordsed! Külastajate arv, kes hakkasid pakkumisi tegema kasvas 63%. Aga see pole veel kõik. Nendest, kes alustasid registreerimisprotsessi ja sisestasid kõik andmed, mis vajalikud pakkumiste tegemiseks kasvas 329%. Need numbrid annavad kokku ligi 7 kordse võidu keskkonna tulemustes.

NB! Võimalusel kasuta oma pilte, sest tootja pakutavad pildid on ka enamus konkurentide lehtedel. Oma piltidega eristud teistest müüjatest ja saad kindel olla, et pildid on just sellised nagu sinul vaja.

Koolitus: E-pood ja müük veebis

Soovid saada e-poes müügitulemusi võimalikult kiiresti? Ära rapsi huupi, vaid rakenda parimaid praktikaid kohe algusest peale. E-poe koolitusel vaatame üle kõik tähtsamad valdkonnad ja parimad praktikad, mida pead teadma e-poodi majandades. Vaata lähemalt…

Suuremad pildid kataloogivaates

CRO- agentuur (conversion rate optimization) Optimics viis läbi katse Tšehhi e-poega Mall.cz. Eesmärgiks oli suurendada müüki läbi e-poe kataloogivaate optimeerimise, mille käigus muudeti kataloogis pildid suuremaks.

Kõige tulemuslikumaks osutus kombinatsioon suuremast pildist ja väiksemast tekstimahust. Tekst muutus nähtavaks, kui kasutaja viis hiire toote kohale. Suuremate piltidega versioon kasvatas müüki peaaegu 10 protsendi võrra (9,46%).

Lisaks piltide suurendamisele kataloogivaates anna kasutajale võimalus kataloogi sirvida nii ruudustikuna kui ühetulbalise nimekirjana.

Näiteid piltide kasutamisest e-poodides

Järgnevalt toon mõned näited sellest, kuidas pilte on hästi ja loovalt kasutatud. Esimesena e-pood Design By Humans. Tõeliselt suured ja kvaliteetsed pildid, mida saab ka veel zuumida.

Tundub, et raamatupiltidega justkui ei ole midagi loomingulist ette võtta? Siiski, huvitava viisi raamatute kohta piltide esitamiseks on leidnud veebipood A Book Apart. Esmapilgul võiks arvata, et raamatul on esikaas, tagakaas ja sellest piisab? Aga tegelikult on ju palju muudki. Mitte ainult paber. Mobiiliversioon, Kindle-versioon, erinevad tahvli-vaated. Kuvades raamatu erinevaid vaateid, maitseka kollaažina, tekitab müüja külastajas huvi ja viib ta lähemale tehingu sooritamisele.

Made.com mööblipood tõuseb esile oma üldise välimuse ja hea pildikasutusega. Suurepärane näide sellest, et

veebi üldine kujundus on lihtsalt riiul, mille
eesmärgiks on tuua välja pakutavaid tooteid.

Made.com suured ja kvaliteetsed pildid annavad selge ülevaate toodetest ja toovad esile konteksti, milles tooteid kasutada. Kontekst annab aimu ka toote mõõtmetest, mis tihti ei pruugi ainult toodet vaadates arusaadavad olla. Made.com luubisarnane zuumilahendus jätab natuke soovida. Eriti arvestades, et hiiglasliku resolutsiooniga pildid, mida täisekraanil näidata, on saidis olemas.

Made.com-i natuke nigel piltide suurendamise vahend toob esile järgmise olulise funktsionaalsuse e-poe piltide esitamisel. Kuidas zuumida ja pilte suuremalt näidata?

E-poed ja tootepiltide zuum

Piltide täissuuruses esitamine ja zuumimise võimalus aitavad külastajat tootest parema ülevaate saamisel. See omakorda viib tehingu sooritamiseni. Tihti on piltide suurendamise vahendid keerulised. Ära püüa ratast leiutada ja uut ägedat piltide suurendamise meetodit leiutada. Kasuta funktsioone, mis on iseenesest mõistetavad ja kasutajale juba varasemast selged.

“Ära nii tee”-poole pealt tasub jälgida, et zuumi-funktsiooni ei kasutataks, juhul kui avanev pilt on sama, millel just klikiti (või ainult natuke suurem). Eeskujulik e-poodniks peaks kehtestama reegli “ei kasuta väikeseid pilte!”.

Eriti kõrge kvaliteediga pildid, Blue Tomato

Suured pildid toovad rohkem müüki! Järgnevalt toon kaks näidet sellest, kuidas veebipoed kasutavas piltide suurendamist. Esimene nendest on spordikaupadepood Blue Tomato. Sellel lehel on kõige suurema resolutsiooniga pildid, mida olen näinud e-kaubanduses kasutatavat. Tootevaates olevad pildid on väga head, aga suurendamisfunktsiooni abil esitatakse kasutajale uskumatu detailsusega pilte. Näha on iga niit ja nõelapiste. Sellise kvaliteediga piltide jaoks on vaja need ise teha või kasutada fotograafi  abi.

Kliki pildid, et näha, millise kvaliteediga see originaalis esitatud on.

NB! Eriti suurte piltide puhul on mõistlik kasutada ka funktsiooni, mis lubab külastaja vaadata pilte täisekraanil (full screen). Nii kindlustad, et sinu pilti saab ka pisike brauseriakna puhul lihtsalt maksimaalses võimalikus suuruses uurida.

Loominguline lähenemine e-poe piltidele, Acne Studios

Teise hea näite piltide kvaliteedist ja suurendamisest leiab Acne Studios veebipoest. Acne Studios on riidepood, milles pildid on eriti tähtsal kohal. Nad on ehitanud kogu keskkonna piltide ümber, jättes kujundusraamistiku eriti tagasihoidlikuks. Kataloogi- ja tootevaadetes on piltidel keskne koht ja piltide suurendamiseks on kasutusel kasutusel huvitav lahendus, mis annab hea ülevaate pakutavast.

Build.com suurendus töötab galeriina

Build.com kasutab suurendusfunktsiooni, mis on rohkem kui lihtsalt suure pildi esitlemine. Suure pildi vaatele on lisatud pisipildid teistest antud toote piltidest ja lisatud on kirjeldus. Lisaks on lehe alaosas on välja toodud jagamisnupud. Kuna pildivaade on kasutajale isuäratav, siis võiks selles sisalduda ka “lisa korvi” nupp.

Pane alati tootele mitu pilti ja kasuta väikest galeriid, et iga toote juures pilte kuvada. Külastajad tahavad näha erinevaid vaateid, detaile ja isegi jooniseid enne ostuotsuse tegemist. Rohkem pilte annab külastajale pakutavast selgema pildi, selgem pilt omakorda viib ostu sooritamiseni. Antud vaates võiks olla ka jagamisnupud ja saada sõbrale-funktsioon, mis annab võimaluse suuremate ostude puhul lihtsalt kaaslastelt nõua küsida.

Pildi esitamise puhul on tähtis see, et tuleks kasutada kogu ekraani pinda. Esita pilti servast servani, valged ääred ei anna mingit lisaväärtust.

Footlocker.com palju pilte ja võimas suurendus

Lõpetuseks veel üks hea näide suurte ja kvaliteetsete piltide kasutamisest koos hea suurendusfunktsiooniga. Footlocker.com võimaldab zuumida pilte tootevaates või need eraldi täisekraanil kuvada, mis annab veelgi parema ülevaate toote väljanägemisest. Samuti on paljude toodete puhul galeriina esitatud erinevad rakursid ja värvivalikud.

Kui su toode esineb erinevates värvides, siis tuleks need värvid ka piltidena esitada. Näiteks mõned inimesed suudavad endale ette kujutada, kuidas näeks välja Paks Margareeta, kui see oleks roosa. Paljud aga vajavad pilti sellest aru saamiseks ja ka visuaalselt andekatel on pildist abi, sest nende ettekujutus võib olla vale.

Seda pilti vaadates võiks kohe linnavalitsusele ettepaneku teha, see projekt ellu viia. (pildi originaal)

Kuidas piltide suurendamist mitte teha?

Mitmedes keskkondades leiab suurendusfunktsiooni, mis töötab luubina. Kasutaja liigutab hiirt toote pildil ja näeb selle osalist suurendust eraldi väikeses aknas. Kohati on selle suurendusmeetodi nimeks cloud zoom.

Miks mulle see meetod ei meeldi:

• Ma kasutan hiirt selleks, et pilti vaadata.
• Hiire asukoht ja tegelik suurendus on ekraanil erinevate kohtades.
• Enamasti kuvatakse suurenduses ainult väike osa pilti, mis ei ole ülevaatlik.

Ma ei ole leidnud eksperimentaalseid tulemusi järgmiste väidete kinnituseks, kuid kasutajana tunnen, et see lahendus ei toimi minu jaoks. Selge on see, et enamik e-poodnike ei müü minule, aga ilmselt pole ma ainus, kelle puhul see meetod negatiivse kogemuse annab.

Märkus: Kuigi ma pole reaalseid testiandmeid erinevate zuumimeetodeite vahel näinud, siis üks näide on välja toodud siin slaidid 14 ja 15. Kui tead mõnd allikat zuumi ja e-poe tulemuste eksperimentide kohta, siis palun jaga seda kommentaarides.

360° vaade

Mitmed eksperimendid viitavad sellele, et toodete katsumine paneb inimesi neid rohkem tahtma. Hilisemad katsed on näidanud, et

objekti katsumisele mõtlemine võib anda sama efekti omanikutunde tekkimisel nagu füüsiline kontakt.

Veel üks eksperiment viis selle idee digivaldkonda. Tulemused näitasid, et kui inimesed “katsuvad” tooteid ekraanil sõrmega (tahvelarvutis), siis nad on nõus kauba eest rohkem maksma, kui need, kes kasutavad navigeerimiseks hiirt.

E-kaupmehena on su ülesanne panna külastaja tundma, et ta juba omab seda toodet. Anna neile võimalus toodet “katsuda” ja sellega mängida. Veebipoes saad sellel kogemusele kõige lähemale kasutades toodete 360° vaadet. Sel puhul pole küll tegemist reaalsusega, kuid annab külastajale teatava kontrolli ja vahetuma kogemuse.

Kuidas 360° vaade tulemusi mõjutab? Golfsmith.com katsetas 360° keeratavate piltidega ja need andsid tulemuseks 10-protsendilise kasvu toodete ostmise määras võrreldes tavaliste tootepiltidega. Mõningatel juhtudel kasvas tehingu sooritamise määr 360° vaadete kasutamisel isegi 30-40 protsenti. Lisatud pildil on kujutatud putteri esitamine 360° vaates.

Wiggle.co.uk kombineeris 360° vaate pildi suurendamisega

Liites kokku 360° vaate, suurenduse ja vaatenurga muutmise saad tulemuseks päris erakordse lahenduse. Wiggle.co.uk on oma pakutavate toodete pildifunktsionaalsuse päris peeneks ajanud. Esiteks saab pilte suurendada, teiseks on iga pilt võimalik pöörata 360° ja lisaks sellele on võimalik muuta ka vaate suunda (pealt, alt jne).

Kuid kui tunned, et väikesest vaatest väheks jääb, siis saad pildid veel eraldi suurema vaatena avada. Tulemuseks on lahendus, mis esitab hea resolutsiooni ja kõrge kvaliteediga pilte, mida saab zuumida ja vaatenurka muuta.

Tootepildid kontekstis

Mõni aeg tagasi tundis mu poeg väga suurt huvi Nintendo 3DS mängukonsooli vastu. Huvi oli nii suur, et ma isegi hakkasin tema kõrval Nintendo eksperdiks muutuma. Lõputu infovoog mängudes, funktsioonidest ja võimalustest ei tahtnud lõppeda.

Kuni selle hetkeni kui see järsult lõppes. Läksime pärispoodi ja viskasime pilgu peale. Tulemus? “Mida? Ekraanid ongi nii väikesed?” Huvi liikus sujuvalt kõrvalvitriinis olevale Nintendo 3DS XL mudelile.

Veendu, et kasutad pilte, mille puhul toote suurus on huvilisele mõistetav. Paljude toodete puhul ei pruugi objekti suurus pildil mõistetav olla, kui kõrval pole võrdluseks mõnd tuttavat elementi. Paljudel juhtudel ei ole konteksti vaja. Inimesed ilmselt teavad, kui suured on kingad, riided ja muud igapäevased objektid.

Mõningatel juhtudel võib aga märgist täiest mööda panna. Mis sa arvad, kui suured on need kõlarid? (Kõlarite pilt kontekstis on postituse lõpus).

Kasutades tootepilte, mis esitavad ka konteksti aitab külastajatel visualiseerida nende kasutamist ja läbi selle viib neid lähemale tehingu sooritamisele.

Aita visualiseerida

Inimesed jagunevad kaheks. Need, kes suudavad endale peas ette kujutada, kuidas diivan võiks nende toas välja näha ja need kellele see raskusi valmistab. Samas aitab asjakohane pilt ka neid, kellel visualiseerimisega raskusi ei ole. Kui sul on tooteid erinevates värvides või suurustes, siis näita neid kõiki. Proovi seda teha nii, et külastajal tekiks võimalikult selge pilt pakutavast.

Järgnevalt toon näite sellest, kuidas lipsu, särki ja ülikonda kokku sobitada. Erinevate värvide ja valikute kombineerimisel tekib kümneid ja kümneid võimalusi. Andes kasutajale võimaluse nendega mängida saad tulemusena suurema osalusmäära ja ostusoovi tekkimise. Nendele, kas ise kombineerida ei viitsi võib pakkuda ka ette valmis tehtud valikuid (klassikaline, vabaaeg, trendikas jne).

Kohati võib ka väga kvaliteetne pilt jääda kesiseks, kui puudub selgus asja suuruse osas. Näitena toon siia käekella, millest on tehtud väga kvaliteetne stuudiofoto valgel taustal. Võrdluseks on kõrval sarnase kella pilt, mis tehtud mobiiltelefoniga omaniku randmel. Milline pilt neist paremini müüb ei ole teada, aga teine pilt annab selgema arusaamise kella suurusest ja milline see kasutamisel välja näeb. (Kui tähte närida, siis antud pildi puhul jääb lahtiseks randme jämedus :).

Mõned katsetused näitavad väga suuri muutusi ostude protsendis, kui tooteid esitatakse nii, et kasutaja ei pea ise visualiseerimiseks pingutusi tegema. Lisatud pirni pildi puhul mul täpsed andmed puuduvad. Optimeerimisekspert Bryan Eisenberg toob oma tulemustes välja kasvu, mis ületab oluliselt 100% (147%) selliste piltide kasutamisel.

Vii hiir pildi kohale konteksti nägemiseks

Mõned eelnevalt toodu numbrid on muljetavaldava. Kuid olenevalt valdkonnast võivad tulemused veelgi suuremas olla. Juveelipood Kluster Shop’il õnnestus kasvatada tehingute määra 167% ja müügikäivet 271% Kuidas see neil õnnestus?

Kuna kasutajad tahavad näha nii detailseid tootepilte kui elulisi pilte toote kasutamisest igapäevastes situatsioonides, siis lõid nad lahenduse, mis näitas mõlemat. Viies hiire tootepildi kohale kuvati ehteid nii nagu nad kasutades välja näevad.

Märkus: Üha tihedamini tuleb arvestada, et veebilehte külastatakse läbi mobiilse seadme ja sellisel juhul tuleb, mitmed desktopist tuttavad meetodid vahetada võimalike alternatiivide vastu. Üks olulisemaid neist on “mouse over”-funktsiooni puudumine. Mobiilis peab selle vii hiir pildi kohale asendama mingi muu funktsiooniga.

Kokkuvõtteks

Tootepildid on ühed olulisemad ostuotsuse mõjutaja e-poodides. Looge protsess, mis tagab selle, et kasutajad näeksid selliseid pilte, mis aitavad neil ostuotsuseni jõuda. Erinevates valdkondades annavad pildid erinevaid tulemusi, aga piltide värskendamine ja kvaliteedi parandamine annab peaaegu alati positiivseid tulemusi. Telliskivide puhul võibolla natuke vähem kui moekaupadel, aga ka kõige vähem “fotogeeniliste” toodete juures on oodata tulemuste paranemist.

Piltidega tegelemine on tihti aeganõudev, kuid tulemusena saad, klientide silmis, oma konkurentidest parema positsiooni. Kui tea mõnda head piltide esitamise moodust (müügi suurendamiseks), mida siin kirjeldatud ei ole, siis anna kommentaarides teada!

SEO ja piltide optimeerimine

Alt-atribuut

Selleks, et pildil olev info otsingumootoriteni jõuaks, on HTML keeles alt-atribuut. Selle abil saab pildi juurde lisada kirjelduse selle sisu kohta. Samuti nõuab HTML-spetsifikatsioon, et igal pildil oleks kirjeldus.

Failinimi

Üks oluline piltide optimeerimist võimaldav tegur on piltide failinimed. Tuleb jälgida, et pildifailide nimed kirjeldaksid pildil olevat ja sisaldaksid lehe jaoks olulisi märksõnu.

Näide alt-atribuutide ning failinimede kasutamisest pildi esitamisel:

<img
 src=”huvitav-toode-eestvaade.jpg”
 alt=”Huvitav Toode eestvaade”
 [+muud atribuudid] />

Kasutamine

• Märksõnad pildifaili nimes.
• Piltidel peab olema alt-atribuut.
• Alt kirjeldustes tuleb kasutada sobivaid märksõnu.
• Sõnu ei ole vaja korrata (spämmida).

Pildi suurus

Mahuka pildimaterjali kasutamise puhul on oluline ka pildi maht kilobaitides ja selle suurus pikslites. Kui leht veeb laeb aeglaselt, siis kasutajad vaatavad sessiooni käigus vähem lehti.

Pildi maht kilobaitides tuleks teha nii väikseseks kui võimalik ilma, et kvaliteet kannataks. Järgnevalt olen siia lisanud kaks pilti, mis on välimuselt peaaegu ühesugused, aga üks on teisest üle viie korra väiksem. Mis sa arvad kumb pilt on väiksem?

Puurmani mõis.

See tähendab, et see tuleb ka külastajale 10 korda kiiremini kohale. Kui su kataloogivaates on selliseid pilte kümneid, siis mõjutab see oluliselt kasutaja käitumist.

Pildi mõõdud

Teine viga piltide esitamisel, mida väga sagedasti ette tuleb on suuremõõduliste piltide kasutamine väikeste piltide jaoks. Näiteks kui sul on tootekataloogis pildi suuruseks 400×300 pikselit, aga sa kasutad sellel alal pilti, mille mõõdud on 3000×2250 pikselit. Tulemuseks on jälle aeglasem lehe laadimine. Antud näite puhul oleks see pilt mahult 56 korda suurem, kui tegelikult vaja.

Selliste probleemide vältimiseks tuleb veenduda, et su e-poe tarkvara tekitaks automaatselt pildid, mis mõõtudelt sobiksid kõikidesse vaadetesse. Kõige suuremat originaalpilti läheb vaja ainult suumi kasutamisel ja võib-olla kasutajale alla laadimise võimaluse andmiseks.

Kodulehe optimeerimine ei koosne ainult piltidest vaata ka teisi SEO vigu, mida veebilehtedel tehakse.

Kodulehe optimeerimine otsingumootoritele, SEO koolitus

SEO koolitus annab sulle teadmised, kuidas otsingumootorites paremaid tulemusi saavutada ja rohkem külastajaid lehele tuua. Kuidas selgitada välja, millised märksõnu sihtgrupp kasutab? Milliseid tehnilisi võtteid otsimootoritele optimeerimine sisaldab ja kuidas neid kasutada? Kodulehe optimeerimine otsingumootoritele anna pikaajalisi tulemusi ja aitab kaasa müügi kasvule. Vaata lähemalt…

Siin pildil on näha varasemas tekstis mainitud Estelon kõlarid kontekstis.

_____________________
Image credits:
* Equilibrium by Andy
* Man Working on a Tablet in the Park
* Shopping by Jean Scheijen

Jaga artiklit sõbraga